<!DOCTYPE html>
<html>
<head>
    <title>被封域名管理</title>
    <#include "/header.html">
    <link
            href="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.css"
            rel="stylesheet" />
</head>
<body>


<div id="rrapp" class="layui-container" style="width: 100%;">
    <div>
        <div class="layui-row" style="margin-top: 10px;">
            <div class="layui-col-md2" style="margin-left:10px;">
                <input  type="text" class="form-control" v-model="q.domainName" placeholder="请输入域名名称"/>
            </div>
            <div class="layui-col-md2" style="margin-left: 10px;">
                <select class="selectpicker" id="platformId" data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="取消全选" multiple title="请选择平台名称"   style="width:100%;" >

                </select>
            </div>
            <div class="layui-col-md2" style="margin-left:10px;">
                <select class="selectpicker" id="domainType" title="请选择域名类型"   style="width:100%;" >
                    <option value="">所有域名类型</option>
                    <option value="1">普通域名</option>
                    <option value="2">返回键内页域名</option>
                    <option value="3">返回键首页域名</option>
                </select>
            </div>
            <div class="layui-col-md2" style="margin-left: 10px;">
                <select class="selectpicker" id="lockedType" title="请选择域名被封类型"   style="width:100%;" >
                    <option value="">所有域名被封类型</option>
                    <option value="0">被封</option>
                    <option value="1">掉备案</option>
                </select>
            </div>
           <div class="layui-col-md2" style="margin-left: 10px;">
                <input type="text" class="form-control" required  id="TimeDate"  placeholder="请输入查询日期"  autocomplete="off" >
            </div>
            <div class="layui-col-md1" style="margin-left: 10px;">
                <button  ref="schedule_search" class="btn btn-success" @click="query">查询</button>
            </div>
        </div>
    </div>
    <div class="col-sm-12 select-info table-striped" style="margin-top: 20px;">
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

</div>


<script
        src="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.js"></script>
<script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
<script>


    $(document)
        .ready(
            function() {

                $("#siteSelect").selectpicker({
                    noneSelectedText: '请选择',
                    countSelectedText: function(){}
                });
                $("#domainType").selectpicker({
                    noneSelectedText: '请选择',
                    countSelectedText: function(){}
                });
                $("#lockedType").selectpicker({
                    noneSelectedText: '请选择',
                    countSelectedText: function(){}
                });
                var laydate = layui.laydate;

                laydate.render({
                    elem: '#TimeDate',
                    range: true,
                    position: 'fixed',
                    change:function(value, date, endDate){

                    }
                });
                $('#TimeDate').val(gettime(0)+' - '+gettime(0));
                function gettime(num){
                    var _thisdate =new Date() - (1000*60 *60 *24*num)
                    var date = new Date(_thisdate);
                    var seperator1 = "-";
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var strDate = date.getDate();
                    if (month >= 1 && month <= 9) {
                        month = "0" + month;
                    }
                    if (strDate >= 0 && strDate <= 9) {
                        strDate = "0" + strDate;
                    }
                    var currentdate = year + seperator1 + month + seperator1 + strDate;
                    return currentdate;
                }
                vm.getAllPlatform();
                $("#jqGrid").jqGrid({
                    url: baseURL + 'domainsta/findLockedDomainList',
                    datatype: "json",
                    mtype:'POST',
                    align:'center',
                    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                    colModel: [
                        { label: '统计ID', name: 'id', index: "id", width: 45, key: true,sortable:false},
                        { label: '域名', name: 'dictValue', index: "dictValue", width: 75,sortable:false},
                        { label: '平台昵称', name: 'platformName', width: 75 ,sortable:false},
                        { label: '域名类型', name: 'domainType', width: 75 ,sortable:false,
                            formatter:function(cellvalue, options, rowdata){
                                  if(cellvalue == '1'){
                                      return '<span>普通域名</span>';
                                  }else if(cellvalue == '2'){
                                      return '<span>返回键内页域名</span>';
                                  }else{
                                      return '<span>返回键首页域名</span>';
                                  }
                            }
                        },
                        { label: '被封类型', name: 'domainStatus', width: 75 ,sortable:false,
                            formatter:function(cellvalue, options, rowdata){
                                if(cellvalue == '0'){
                                    return '<span>被封</span>';
                                }else{
                                    return '<span>掉备案</span>';
                                }
                            }
                        },
                        { label: '被封时间', name: 'endtime', index: "endtime", width: 80,sortable:false}
                    ],
                    viewrecords: true,
                    height: 385,
                    rowNum: 10,
                    rowList : [100,200,500,900],
                    rownumbers: true,
                    rownumWidth: 25,
                    autowidth:true,
                    multiselect: true,
                    pager: "#jqGridPager",
                    jsonReader : {
                        root: "page.list",
                        page: "page.currPage",
                        total: "page.totalPage",
                        records: "page.totalCount"
                    },
                    prmNames : {
                        page:"page",
                        rows:"limit",
                        order: "order",
                     },
                    serializeGridData: function (postData)
                     {
                       // console.log(postData);
                        if (postData.page === undefined) postData.page = null;
                        if (postData.rows === undefined) postData.rows = null;
                        if (postData.order === undefined) postData.order = null;
                        return JSON.stringify(postData);
                    },
                    gridComplete:function(){
                        //隐藏grid底部滚动条
                        $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
                    }
                });
            });
    var vm = new Vue({
        el : '#rrapp',
        data : {
            q:{
                domainName:''
            }
        },
        methods : {
            query : function() {
                vm.reload();
            },
            getAllPlatform:function () {
                $.ajax({
                    type: "get",
                    url: baseURL + "platform/findAllPlatform",
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 0) {
                            var _html = ''
                            for (var i = 0; i < data.platformList.length; i++) {
                                _html = _html + '<option value="' + data.platformList[i].platformId + '">' + data.platformList[i].nickName + '</option>'
                            }
                            $('#platformId').append(_html);
                            $('#platformId').selectpicker('refresh');
                        }
                    }
                })
            },
            reload : function() {
                var page = $("#jqGrid").jqGrid('getGridParam','page');
                var splitTime = $('#TimeDate').val()? $('#TimeDate').val().split(' - '):'';
                var params = {
                    domainName:vm.q.domainName,
                    platformIds:$("#platformId").val(),
                    startDate:splitTime?splitTime[0]:'',
                    endDate:splitTime?splitTime[1]:'',
                    domainType:$("#domainType").val(),
                    domainStatus:$("#lockedType").val()
                };
                var minData;
                var maxData;
                if(params.startDate>params.endDate){
                    maxData = params.startDate;
                    minData = params.endDate;
                    params.endDate = maxData;
                    params.startDate = minData;
                }
               // console.log(params);
                $("#jqGrid").jqGrid('setGridParam',{
                    postData:params,
                    page:page
                }).trigger("reloadGrid");
            }
        }
    });
 </script>


</body>
</html>